import React, { Component } from 'react';
import { LeftOutline } from 'antd-mobile-icons'
import '../style/Index/Search/search.css'
import { withRouter } from 'react-router-dom';
import services from '../api/interface'

class Search extends Component {
    state = {
        shotlist: [],keywords:''
    }
    onClick() {
        this.props.history.go(-1)
    }
    async onhandleClick(item){
        var res2 = await services.pro.pro_categorylist({keyword:item.keyword})
        this.props.history.push({pathname:'/searchdetail',state:{key:item.keyword}})
        console.log(item.keyword);

    }
    async componentDidMount() {
        var res = await services.pro.pro_hotword()
        this.setState({
            shotlist: res.data.data
        })
        console.log(res.data.data);
    }
    onChange(e){
        this.setState({
            keywords:e.target.value
        })
   
    }
    async searchclick(){
        this.props.history.push({pathname:'/searchdetail',state:{key:this.state.keywords}})
    }
    render() {
        return (
            <div className='searchh'>
                <div className="stopp">
                    <span onClick={() => { this.onClick() }}>
                        <LeftOutline />
                    </span>
                    <input type="text" placeholder='清风抽纸' value={this.state.keywords} onChange={(e)=>{this.onChange(e)}}/>
                    <div className="anniu" onClick={()=>{this.searchclick()}}>搜索</div>
                </div>
                <div className="stext">
                    <div className="snear">
                        <p>历史搜索</p>
                        <div className="searchistory">
                        {this.state.keywords}
                        </div>
                    </div>
                    <div className="shot">
                        <div className='shotop'>
                            热门搜索
                        </div>
                        <div className='shottbottom'>
                            {
                                this.state.shotlist.map((item, index) => {
                                    return (
                                        <div className="shotbox" key={index} onClick={()=>{this.onhandleClick(item)}}>
                                            {item.keyword}
                                        </div>
                                    )
                                })
                            }
                        </div>



                    </div>
                </div>
            </div>
        );
    }
}

export default withRouter(Search);